import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import "./index.css";

export default class List extends Component {
  // PubSubJS 兄弟组件间通信
  state = {
    users: [],
    isFirst: true,
    isLoading: false,
    error: "",
  }

  componentDidMount() {
    this.token = PubSub.subscribe('changeWord', (msg, data) => {
      console.log("List（订阅）收到数据：", msg, data)
      this.setState(data);
    })
  }

  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  }

  render() {
    // const { users, isFirst, isLoading, err } = this.props;
    const { users, isFirst, isLoading, err } = this.state;
    return (
      <div className='row'>
        {
            users.map((userObj) => {
                return (
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                    isLoading ? <h2>正在加载...</h2> :
                    err ? <h2 style={{color: "red"}}>{err}</h2> :
                    <div key={userObj.id} className='card'>
                        <a ref="noreferrer" href={userObj.html_url} target="_blank">
                            <img alt="head_protrait" src={userObj.avatar_url} style={{width: "100px"}} />
                        </a>
                        <p className='card-text'>{userObj.login}</p>
                    </div>
                )
            })
        }
        </div>
    )
  }
}
